<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>开奖管理</el-breadcrumb-item>
          <el-breadcrumb-item>极速赛车</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px;"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center;">
            <el-input style="width: 260px;" v-model="inputval" placeholder="请输入开奖期号" />
            <div style="padding: 5px;"></div>
            <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
            <div style="width: 50px;"></div>
            <el-button type="primary" :icon="Search" @click="show_yskj()">预设开奖</el-button>
          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="序号" width="100" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.id }}</div>
            </template>
          </el-table-column>

          <el-table-column label="游戏类型">
            <template #default="scope">
              <el-tag>极速赛车</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="issue" label="开奖期号" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.issue }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="number" label="开奖号码" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.number }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="系统开奖时间" />
          <el-table-column prop="create_time" label="创建时间" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.create_time }}</div>
            </template>
          </el-table-column>

          <el-table-column label="开奖状态" width="200">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" type="danger" plain style="font-weight: bold;">进行中</el-tag>
              <el-tag v-if="scope.row.status == 2" type="success" plain style="font-weight: bold;">已开奖</el-tag>
              <el-tag v-if="scope.row.status == 3" type="info" plain style="font-weight: bold;">预设中</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="订单操作" width="190">
            <template #default="scope">
              <el-button type="success" @click="show_edit(scope.row)" v-if="scope.row.status != 2">修改</el-button>
              <el-button type="success" @click="manual_lottery(scope.row)">手动开奖</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px;"></div>
        <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                       :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                       :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </el-card>
    </el-col>
  </el-row>

  <!-- 菜单权限管理 -->
  <el-dialog v-model="showDialog" title="手动开奖" center width="40%" :destroy-on-close="true">
    <el-form label-width="80px">

      <el-form-item label="开奖期号">
        <el-input v-model="formData.issue" :disabled="Boolean(formData.issue)" />
      </el-form-item>
      <el-form-item label="开奖号码">
        <div class="number_list" style="display:block;">
          <el-input-number v-model="formData.numberArr[0]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[1]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[2]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[3]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[4]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[5]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[6]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[7]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[8]" :min="1" :max="10" />
          <el-input-number v-model="formData.numberArr[9]" :min="1" :max="10" />

        </div>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button type="primary" @click="formSubmit()">确定手动开奖</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="showYskj" title="预设开奖" center width="30%" :destroy-on-close="true">
    <el-form label-width="80px">
      <el-form-item label="预设期数">
        <el-input type="number" v-model="yskjData.num" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="yskjSubmit()">确定预设开奖</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="showEdit" title="修改" center width="500" :destroy-on-close="true">
    <el-form label-width="80px">
      <el-form-item label="号码">
        <div class="number_list" style="display:block;">
          <el-input-number v-model="editData.num1" :min="1" :max="10" />
          <el-input-number v-model="editData.num2" :min="1" :max="10" />
          <el-input-number v-model="editData.num3" :min="1" :max="10" />
          <el-input-number v-model="editData.num4" :min="1" :max="10" />
          <el-input-number v-model="editData.num5" :min="1" :max="10" />
          <el-input-number v-model="editData.num6" :min="1" :max="10" />
          <el-input-number v-model="editData.num7" :min="1" :max="10" />
          <el-input-number v-model="editData.num8" :min="1" :max="10" />
          <el-input-number v-model="editData.num9" :min="1" :max="10" />
          <el-input-number v-model="editData.num10" :min="1" :max="10" />

        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" :disabled="editData.num1==null||editData.num2==null||editData.num3==null" @click="editSubmit()">确定修改</el-button>
    </template>
  </el-dialog>

</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'

const showDialog = ref(false)
const tableData = reactive({ list: [] })
const formData = reactive({
  issue: '',
  numberArr: [1,2,3,4,5,6,7,8,9,10],
})

onMounted(() => {
  admin_aomen_issue()
})

const showYskj = ref(false)
const yskjData = reactive({
  type: 1,
  num: 1
})
function show_yskj(item) {
  showYskj.value = true
}

function yskjSubmit() {
  request_post('/admin_pk10_yskj', yskjData).then((res) => {
    if (res.data.code == 200) {
      showYskj.value = false
      page.issue = ''
      page.pagenum = 1
      page.pagesize = 18
      page.total = 0
      admin_aomen_issue()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}

function manual_lottery(item) {
  showDialog.value = true
  formData.issue = item.issue
  formData.type = item.type
  let number = []
  if(item.number){
    number = item.number.split(",");
  }
  formData.numberArr[0] = parseInt(number[0]) || 1
  formData.numberArr[1] = parseInt(number[1]) || 2
  formData.numberArr[2] = parseInt(number[2]) || 3
  formData.numberArr[3] = parseInt(number[3]) || 4
  formData.numberArr[4] = parseInt(number[4]) || 5
  formData.numberArr[5] = parseInt(number[5]) || 6
  formData.numberArr[6] = parseInt(number[6]) || 7
  formData.numberArr[7] = parseInt(number[7]) || 8
  formData.numberArr[8] = parseInt(number[8]) || 9
  formData.numberArr[9] = parseInt(number[9]) || 10
}

function formSubmit() {
  formData.number = formData.numberArr.toString()
  request_post('/admin_pk10_manual_issue', formData).then((res) => {
    if (res.data.code == 200) {
      showDialog.value = false
      page.pagenum = 1
      admin_aomen_issue()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}

const showEdit = ref(false)
const editData = reactive({
  type: '1',
  id: '',
  num1: 1,
  num2: 2,
  num3: 3,
  num4: 4,
  num5: 5,
  num6: 6,
  num7: 7,
  num8: 8,
  num9: 9,
  num10: 10,
})
function show_edit(item) {
  showEdit.value = true
  editData.id = item.id
  let number = []
  if(item.number){
    number = item.number.split(",");
  }
  editData.num1 = parseInt(number[0]) || 0
  editData.num2 = parseInt(number[1]) || 0
  editData.num3 = parseInt(number[2]) || 0
}
function editSubmit() {
  request_post('/admin_pk10_issue_edit', editData).then((res) => {
    if (res.data.code == 200) {
      showEdit.value = false
      page.issue = ''
      page.pagenum = 1
      page.pagesize = 18
      page.total = 0
      admin_aomen_issue()
      return success(res.data.msg)
    } else {
      return error(res.data.msg)
    }
  })
}

// 搜索
const inputval = ref('')
function inputSearch() {
  if (inputval.value == '') {
    return error('请输入代理UID')
  }
  page.issue = inputval.value
  admin_aomen_issue()
}

// 获取用户列表
function admin_aomen_issue() {

  request_post('/pk10_issue', page).then((res) => {
    if (res.data.code == 200) {
      tableData.list = res.data.data.data
      page.total = res.data.data.total
    } else {
      return error(res.data.msg)
    }
  })

}


const page = reactive({
  issue: '',
  pagenum: 1,
  type:1,
  pagesize: 18,
  total: 0
})

function handleSizeChange(val) {
  page.pagenum = val
  admin_aomen_issue()
}
function handleCurrentChange(val) {
  page.pagenum = val
  admin_aomen_issue()
}


</script>
<style>
.number_list{
  display: block;
  align-items: center;
}
.number_list .el-input-number{
  width: 100px;
  margin-right: 15px;
  margin-bottom: 10px;
}
</style>
